import React, { useEffect, useState } from 'react';
import { Button, Modal, Input, message, Empty } from 'antd';
import { PlusOutlined, EditOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { useStore } from '@/store';
import { nanoid } from 'nanoid';
import { history } from 'umi';
import StorageManager from '@/utils/StorageManager';
import { getStore } from '@/services/system.service';

import SuoLueTu from './SuoLueTu';
import styles from './index.less';

const SlideList = () => {
  const {
    slideFatnerList,
    slideList,
    setCurrentSlideIndex,
    currentSlideIndex,
    updateSlide,
    setCurrentPresentation,
    updateSlideTitle,
    updateAnyData,
  } = useStore();
  console.log('列表页', slideList, currentSlideIndex);
  const [modalVisible, setModalVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [storeData, setStoreData] = useState(null);

  const queryData = () => {
    getStore().then((res) => {
      // console.log('getStore===', res);
      if (res && res?.hasOwnProperty('store')) {
        if (res?.store && res?.store?.length > 0) {
          // 有值的情况
          updateAnyData({
            slideFatnerList: res?.store || [],
            sildeFatherId: '',
          });
          setStoreData(res?.store);
          updateSlide(res?.store?.slideList || []);
          updateSlideTitle(res?.store?.slideTitle || '');
          setCurrentPresentation(res?.store?.slideList?.length > 0 ? 1 : 0);
        } else {
          // 无值的情况
          updateAnyData({
            slideFatnerList: [],
            sildeFatherId: '',
          });
          updateSlide([
            {
              sortId: 1,
              id: nanoid(),
              elements: [],
            },
          ]);
          updateSlideTitle('');
          setCurrentPresentation(1);
        }
      } else {
        message.error('登录已过期，请重新登录');
        history.push('/dashboard');
      }
    });
  };

  useEffect(() => {
    queryData();
  }, []);

  const handleCancel = () => {
    setModalVisible(false);
    setInputValue('');
  };

  const handleOK = () => {
    if (!inputValue) {
      message.error('请输入幻灯片标题');
      return;
    }
    setModalVisible(false);
    const id = nanoid();
    history.push(`/slide/detail?title=${inputValue}`);
    updateAnyData({
      sildeFatherId: id,
    });
    handleCancel();
  };

  return (
    <div className={styles['slide-list']}>
      <Button
        style={{ marginBottom: 20, marginLeft: 80 }}
        key="add"
        type="primary"
        icon={<PlusOutlined />}
        onClick={() => {
          // if (storeData && slideList?.length > 0) {
          //   message.error('当前已有演示文稿');
          //   return;
          // }
          setModalVisible(true);
        }}
      >
        新演示
      </Button>
      {slideFatnerList && slideFatnerList?.length > 0 ? (
        <div className={styles['list-wrap']}>
          {slideFatnerList?.map((fatherItem, fatherIndex) => {
            return (
              <div key={fatherItem.id}>
                <div className={styles['list-item']}>
                  <div className={styles['content']}>
                    {/* 缩略图展示---仅仅展示一张幻灯片 */}
                    <SuoLueTu fatherItem={fatherItem} />
                  </div>
                  <div className={styles['title']}>
                    <div className={styles['title-text']}>{fatherItem?.slideTitle}</div>
                    {/* <div className={styles['title-desc']}>我是描述我是描述我是描述我是描述</div> */}
                    <div style={{ float: 'right', marginTop: 1 }}>
                      <EditOutlined
                        onClick={() => {
                          history.push(
                            `/slide/detail?title=${fatherItem.slideTitle}&id=${fatherItem.id}`,
                          );
                        }}
                        style={{ fontSize: 20, marginLeft: 8, cursor: 'pointer' }}
                      />
                      {/* <PlayCircleOutlined style={{ fontSize: 20, marginLeft: 18, cursor: 'pointer' }} /> */}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <Empty />
      )}

      <Modal
        width={400}
        title="设置幻灯片标题"
        open={modalVisible}
        onCancel={handleCancel}
        onOk={handleOK}
        okText="创建"
        cancelText="取消"
      >
        <Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      </Modal>
    </div>
  );
};

export default SlideList;
